import React, { Component } from 'react'
import { NavBar } from "antd-mobile";
import SearchInput from "../searchinput/SearchInput";
import "./Category.css"
import myaxios from "../../utils/myaxios"
export default class Categort extends Component {
    state = {
        categories: [],//返回的菜单数据
        categories_content: [],//右边渲染内容
        select_index: 0,//
    };
    //左边点击事件
    handleItemClick = (e) => {
        console.log(e);
        //   console.log(  e.target.getAttribute("data-index"));
   
    // 获取点击选中的项
        let select_index = e.target.getAttribute("data-index")
        this.setState({
            select_index: parseInt(select_index),
            categories_content: this.state.categories[select_index].children,
        })
   
}
     // 右边图片点击的时候
    handleProductItemClick = (e) => {
        let cid = e.target.getAttribute("data-index");
        console.log(this.props);
        console.log(cid);
        this.props.history.push("/goodList/" + cid);
    };
      // 获取分类菜单的数据
    getCategories = (params) => {
        myaxios.get("/categories").then(res => {//获取数据
            console.log(res);
            //缓存一下数据，
            this.setCategories(res)
            //myaxios配置的作用就是为了过滤掉data和message,否则res.data.message,
        }).catch(err => {
            console.log(err);
        });
    }
      // 设置分类菜单的数据
    //is_storaged代表他自否缓存过
    setCategories = (res, is_storaged) => {
        let categories_cache = {};
        if (is_storaged) {
         // 直接获取本地缓存中的数据即可
            categories_cache = JSON.parse(localStorage.getItem("categories_cache"))
        } else {
            categories_cache = {
                data: Date.now(),
                categories: res,
            }
        }
            // 缓存到本地中
        localStorage.setItem("categories_cache", JSON.stringify(categories_cache))
        this.setState({//设置数据状态
            categories: res,
            categories_content: res[0].children
        });
    }
    componentDidMount(){

        // https://www.linweiqin.cn/api/public/v1/categories
        //因为路径在 myaxios.js里配过所以可以直接用/categories
        // 进来的时候 先判断本地缓存是否过期
        // 如果没有过期的情况下 直接获取本地的缓存
        let categories_cache = localStorage.getItem("categories_cache");
        // 如果本地缓存不为空
        if (categories_cache) {
            //判断本地缓存是否过期
            //当前时间
            let current_time = Date.now();
            //存储的时间
            let storage_time = JSON.parse(categories_cache).date
            if (current_time - storage_time > 60 * 60 * 1000) {
                //一个小时过期
                this.getCategories()
            } else {
                //缓存是否过期
                //第二个参数代表之前是否缓存过
                this.setCategories(JSON.parse(categories_cache).categories, true)
            }

        } else {
            this.getCategories();
        }
        //因为路径在 myaxios.js里配过所以可以直接用/categories

    }
    render() {
        return (
            <div className="yg-category">
                <div className=" yg-category-nav">
                    <NavBar className="icategory-nav">
                        商品分类
                </NavBar>

                </div>
                  {/* 首页导航条结束 */}
                {/* {搜素框开始} */}
                <div className="yg-category-search">
                    <SearchInput>

                    </SearchInput>
                </div>
                {/* 首页搜索框结束 */}
                {/* 分类菜单开始 */}
                <div className="yg-category-content">
                    {/* 利用冒泡机制处理点击事件 */}
                    <div className="content-left" onClick={this.handleItemClick}>
                        {
                            this.state.categories.map((v, index) => {//给ative加个索引
                                //三目运算法，如果this.state.select_index===index?就加上active

                                return (<div data-index={index} className={this.state.select_index === index ?
                                    "active content-left-item" : "content-left-item"

                                }
                                    key={v.cat_id}

                                >
                                    {v.cat_name}
                                </div>)
                            })
                        }
                    </div>
                    <div className="content-right">

                        {this.state.categories_content.map((v, i) => {
                            return (
                                <div className="content-right-item" key={v.cat_id}>
                                    {/* 二级菜单的开始 */}
                                    <div className="right-item-title">
                                        {"/"}
                                        {v.cat_name}
                                        {"/"}

                                    </div>
                                    {/* 二级菜单的结束 */}
                                    {/* {产品列表的开始} */}
                                    <div className="product-list" onClick={this.handleProductItemClick}>
                                        {/* 右边列表点击事件 */}
                                        {
                                            v.children && v.children.map(v => {
                                                return <div key={v.cat_id}
                                                    className="product-list-item" data-index={v.cat_id}>
                                                    {/* data-index={v.cat_id} 给每一项被点击的加上数据索引，在上面定义点击事件的时候获取*/}
                                                    <div className="imagerWrapper">
                                                        <img src={v.cat_icon} alt="" data-index={v.cat_id} />
                                                    </div>
                                                    <div className="item-title">
                                                        {v.cat_name}
                                                    </div>


                                                </div>

                                            })
                                        }
                                    </div>

                                </div>
                            )
                        })}

                    </div>

                </div>
            </div>
        )
    }
    }